<template @click="close">
  <div class="contentlist">
    <h2>更多演出</h2>
    <!-- 主体分类框 -->
    <ul class="list">
      <li class="active">
        <span @click="open">
          {{ this.$store.state.cate }}
          <!-- 分类箭头 ↑ ↓ -->
          <i class="el-icon-caret-top" v-if="this.$store.state.isShow"></i>
          <i class="el-icon-caret-bottom" v-else></i>
        </span>
      </li>
      <li>
        <span>全部时间</span>
      </li>
      <li>
        <span>推荐排序</span>
      </li>
      <li>
        <span>距离最近</span>
      </li>
    </ul>
    <!-- 全部分类下拉选择 -->
    <cate-list v-show="this.$store.state.isShow" class="cateList"></cate-list>
    <!-- 内容详情 -->
    <div class="content">
      <section
        v-for="(ticket, ins) in this.$store.state.tickets"
        :key="ins"
        @click="detail(ticket.id)"
      >
        <img v-lazy="ticket.verticalPic" :key="ticket.verticalPic" />
        <div class="con-Right">
          <h1 class="title">{{ ticket.name }}</h1>
          <p>{{ ticket.address }}/{{ ticket.date }}</p>
          <span>￥{{ ticket.price }}</span>
        </div>
      </section>
      <section v-show="this.$store.state.tickets.length==0">
          <div>
            <h1>暂无此类信息</h1>
          </div>
      </section>
    </div>
  </div>
</template>

<script>
import CateList from "./CateList";
export default {
  data: function () {
    return {};
  },
  mounted() {
    this.axios.get("/moreyc").then((res) => {
      this.$store.commit("tickets", res.data.result);
      localStorage.setItem("cate", "全部分类");
    });
  },
  components: {
    CateList,
  },
  methods: {
    open(e) {
      e.stopPropagation();
      this.$store.commit("isShowChange");
    },
    scorll(listop, val) {
      window.onscroll = function (event) {
        if (event.pageY >= listop) {
          $(".list").addClass("scoll");
        } else {
          $(".list").removeClass("scoll");
        }
        var height = window.innerHeight;
        let scrHeight = event.pageY;
        let conHeight = document.body.scrollHeight;
        if (scrHeight + height > conHeight - 20) {
          // console.log('aaa');
          this.tickets = this.tickets.concat(val);
        }
        // console.log(this.tickets);
      }.bind(this);
    },
    detail(val) {
      this.$store.commit("setId", val);
      location.href = "#/detail";
      window.scrollTo(0, 0);
    },
  },
};
</script>

<style scoped>
.contentlist {
  margin-top: 10px;
  padding: 0 20px;
  position: relative;
}
/* 下拉选择的位置 */
.contentlist .cateList {
  position: relative;
}
/* 标题样式 */
.contentlist h2 {
  text-align: left;
  font-size: 18px;
}
/* 分类主题样式 */
.contentlist > ul {
  list-style: none;
  overflow: hidden;
  padding: 15px 0;
  background-color: white;
  width: 100%;
}
/* 分类 */
.contentlist > ul li {
  float: left;
}
/* ‘全部分类’ 字体 */
.contentlist > ul li.active span {
  color: #ff1268;
}
/* 其余字体 */
.contentlist > ul li span {
  color: #999;
  margin-right: 14px;
}
/* 主体样式 */
.contentlist .content {
  padding-bottom: 30px;
}
.contentlist .content section {
  overflow: hidden;
  margin-top: 20px;
}
/* 演出图片样式 */
.contentlist .content section img {
  float: left;
  width: calc(40% - 13px);
  margin-right: 13px;
}
/* 以下皆为演出文本样式 */
.contentlist .content section .con-Right {
  float: left;
  width: 60%;
  height: 45vw;
  position:relative;
}
.contentlist .content section .con-Right h1 {
  font-size: 18px;
  text-align: left;
  margin-bottom: 10px;
}
.contentlist .content section .con-Right p {
  text-align: left;
  color: #888;
  font-size: 15px;
  height: 20px;
  overflow: hidden;
  /* 字体不换行 */
  white-space: nowrap;
  /* 文本溢出时用...代替 */
  text-overflow: ellipsis;
}
/* 标题显示 两行*/
.title {
  text-overflow: ellipsis; /*显示为省略号 */
  display: -webkit-box; /*对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /*显示行数## 标题文字 ## */
  overflow: hidden;
}
.contentlist .content section .con-Right span {
  position:absolute;
  bottom:0;
  color: #ff1268;
  display: block;
  text-align: left;
  font-size: 18px;
}
</style>